<md-dialog flex="30">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h1>{{step.name}} Duration Detail</h1>
            <span flex></span>
            <i class="fa fa-times" ng-click="cancel()"></i>
        </div>
    </md-toolbar>
    <md-dialog-content style="padding: 40px 40px 30px 34px;">
        <div ng-show="stepTimer">
            <div class="form-group row" ng-repeat="timePoint in stepTimer.timePoints">
                <span class="col-md-5" style="text-align: right; font-weight: 600;">{{timePoint.timeType}}:</span>{{timePoint.time | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}
            </div>
            <div class="form-group row">
                <span class="col-md-5" style="text-align: right; font-weight: 600;">Duration Time:</span> {{stepTimer.durationTime}}
            </div>
        </div>
        <div ng-show="!stepTimer" >
            <h3>Sorry, There is no duration detail!</h3>
        </div>
    </md-dialog-content>
    <md-dialog-actions layout="row">
        <div style="margin-right: 50px">
              <button type="button blue" class="btn default" ng-click="cancel()">OK</button>
        </div>
    </md-dialog-actions>
</md-dialog>
